import cn from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import ECharts from '@kuiper-components/echarts';
import Helper from '../../../../components/Helper';
import { percent } from '../../../../../common/formatter';
import s from './style.module.css';

const option = {
	title: {
		text: '',
		top: 'middle',
		left: 'center',
		textStyle: {
			fontSize: 12,
			fontWeight: 'normal',
		},
	},
	grid: {
		top: 0,
		right: 0,
		bottom: 0,
		left: 0,
	},
	tooltip: {
		confine: true,
		trigger: 'item',
		formatter: '{b} : {c} ({d}%)',
	},
	series: {
		type: 'pie',
		radius: ['65%', '80%'],
		center: ['50%', '50%'],
		label: {
			normal: {
				show: false,
				position: 'outside',
			},
			emphasis: {
				show: false,
				textStyle: {
					fontSize: '20',
					fontWeight: 'normal',
				},
			},
		},
		labelLine: {
			normal: {
				show: false,
			},
			emphasis: {
				show: false,
			},
		},
	},
};

function CountsPieChart({ data, total }) {
	const text = percent(data / total || 0);
	option.title.text = text;
	option.series.data = [
		{
			name: 'IPv6支持率',
			value: data,
			itemStyle: {
				color: '#00b56c',
			},
		},
		{
			name: 'IPv6未支持率',
			value: total - data,
			itemStyle: {
				color: '#f6f9fc',
			},
		},
	];

	return (
		<div className={cn(s.levelCount)}>
			<ECharts option={option} className={s.chart} key={JSON.stringify(data)} />
			<div className={s.cate}>
				IPv6支持率
				<Helper overlay="支持IPv6资产数占总检测资产数的比例" placement="top" />
			</div>
		</div>
	);
}

CountsPieChart.propTypes = {
	className: PropTypes.string,
	total: PropTypes.number.isRequired,
	data: PropTypes.object,
};
CountsPieChart.defaultProps = {
	className: s.levelCount,
	total: 0,
	data: {},
};

export default CountsPieChart;
